<template>
  <div class="app">
    <!-- Header -->
    <AppHeader 
      :current-user="currentUser"
      :show-search="false"
      @login="showLoginModal"
      @register="showRegisterModal"
      @logout="handleLogout"
    />

    <!-- Main Content -->
    <div class="main-container">
      <!-- Sidebar -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <h3>笔记列表</h3>
          <div class="sidebar-actions">
            <button class="btn btn-primary btn-sm" @click="showAddCourseModal" title="创建新笔记">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
        
        <div class="course-list">
          <div 
            v-for="course in courses" 
            :key="course.id"
            class="course-item"
            :class="{ active: currentCourse && currentCourse.id === course.id }"
            @click="selectCourse(course)"
          >
            <div class="course-info">
              <div class="course-name">{{ course.name }}</div>
              <div class="course-chapters">{{ course.chapters ? course.chapters.length : 0 }} 章节</div>
            </div>
            <div class="course-actions">
              <button 
                class="action-btn" 
                @click.stop="editCourse(course)"
                title="编辑笔记"
              >
                <i class="fas fa-edit"></i>
              </button>
              <button 
                class="action-btn" 
                @click.stop="deleteCourse(course)"
                title="删除笔记"
              >
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
          
          <!-- 创建新笔记按钮卡片 -->
          <div class="course-item add-course" @click="showAddCourseModal">
            <div class="add-course-content">
              <i class="fas fa-plus"></i>
              <span>创建新笔记</span>
            </div>
          </div>
        </div>
      </aside>

      <!-- Content Area -->
      <main class="content">
        <div class="content-header">
          <nav class="breadcrumb">
            <router-link to="/" class="breadcrumb-item">首页</router-link>
            <span v-if="currentCourse" class="breadcrumb-item">{{ currentCourse.name }}</span>
            <span v-if="currentChapter" class="breadcrumb-item">{{ currentChapter.title }}</span>
          </nav>
        </div>

        <!-- Welcome Screen -->
        <div class="welcome-screen" v-if="!currentCourse">
          <div class="welcome-content">
            <i class="fas fa-book-open"></i>
            <h2>欢迎使用笔记系统</h2>
            <p>开始创建您的第一个笔记，记录学习内容</p>
            <button class="btn btn-primary" @click="showAddCourseModal">
              创建第一个笔记
            </button>
          </div>
        </div>

        <!-- Chapter List View -->
        <div class="chapter-view" v-if="currentCourse && !currentChapter">
          <div class="chapter-header">
            <h2>{{ currentCourse.name }}</h2>
            <button class="btn btn-primary" @click="showAddChapterModal">
              <i class="fas fa-plus"></i>
              新增章节
            </button>
          </div>
          
          <div class="chapter-grid">
            <div 
              v-for="(chapter, index) in currentCourse.chapters" 
              :key="chapter.id"
              class="chapter-card"
              @click="editChapter(chapter)"
            >
              <div class="chapter-number">{{ index + 1 }}</div>
              <div class="chapter-content">
                <h3>{{ chapter.title || '未命名章节' }}</h3>
                <div class="chapter-meta">
                  <span>{{ getContentPreview(chapter.content) }}</span>
                </div>
              </div>
              <div class="chapter-actions">
                <button class="action-btn" @click.stop="deleteChapter(chapter)" title="删除">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
            
            <div class="chapter-card add-chapter" @click="showAddChapterModal">
              <div class="add-chapter-content">
                <i class="fas fa-plus"></i>
                <span>添加新章节</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Note Editor View -->
        <div class="note-editor-view" v-if="currentChapter">
          <div class="editor-header">
            <div class="editor-title">
              <input 
                type="text" 
                v-model="currentChapter.title"
                placeholder="输入章节标题..." 
                class="title-input"
                @blur="saveChapter"
              >
            </div>
            <div class="editor-actions">
              <button class="btn btn-ghost" @click="saveChapter">
                <i class="fas fa-save"></i>
                保存
              </button>
              <button class="btn btn-ghost" @click="backToChapters">
                <i class="fas fa-arrow-left"></i>
                返回
              </button>
            </div>
          </div>

          <div class="editor-toolbar">
            <button class="toolbar-btn" @click="formatText('bold')"><i class="fas fa-bold"></i></button>
            <button class="toolbar-btn" @click="formatText('italic')"><i class="fas fa-italic"></i></button>
            <button class="toolbar-btn" @click="formatText('underline')"><i class="fas fa-underline"></i></button>
            <div class="toolbar-separator"></div>
            <button class="toolbar-btn" @click="formatText('justifyLeft')" title="左对齐"><i class="fas fa-align-left"></i></button>
            <button class="toolbar-btn" @click="formatText('justifyCenter')" title="居中对齐"><i class="fas fa-align-center"></i></button>
            <button class="toolbar-btn" @click="formatText('justifyRight')" title="右对齐"><i class="fas fa-align-right"></i></button>
            <div class="toolbar-separator"></div>
            <button class="toolbar-btn" @click="formatText('insertUnorderedList')"><i class="fas fa-list-ul"></i></button>
            <button class="toolbar-btn" @click="formatText('insertOrderedList')"><i class="fas fa-list-ol"></i></button>
            <div class="toolbar-separator"></div>
            <button class="toolbar-btn" @click="insertImage"><i class="fas fa-image"></i></button>
            <input ref="imageInput" type="file" accept="image/*" style="display: none;" @change="handleImageUpload">
          </div>

          <div class="editor-container">
            <div 
              ref="noteEditor"
              class="editor" 
              contenteditable="true"
              @input="onEditorInput"
              @blur="saveChapter"
            >
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- Add Course Modal -->
    <div class="modal" v-if="showCourseModal" @click="handleModalOverlayClick">
      <div class="modal-content">
        <div class="modal-header">
          <h3>新建笔记</h3>
          <button class="modal-close" @click="hideCourseModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="courseName">笔记名称</label>
            <input 
              type="text" 
              id="courseName" 
              v-model="newCourse.name"
              placeholder="输入笔记名称..."
            >
          </div>
          <div class="form-group">
            <label for="courseDescription">笔记描述</label>
            <textarea 
              id="courseDescription" 
              v-model="newCourse.description"
              placeholder="输入笔记描述..." 
              rows="4"
            ></textarea>
          </div>
          <div class="form-group">
            <label for="courseIsPublic">是否公开</label>
            <select 
              id="courseIsPublic" 
              v-model="newCourse.isPublic"
              class="form-select"
            >
              <option :value="true">公开（所有人可见）</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-ghost" @click="hideCourseModal">取消</button>
          <button class="btn btn-primary" @click="createCourse">创建笔记</button>
        </div>
      </div>
    </div>

    <!-- Edit Course Modal -->
    <div class="modal" v-if="showEditCourseModal" @click="handleModalOverlayClick">
      <div class="modal-content">
        <div class="modal-header">
          <h3>编辑笔记</h3>
          <button class="modal-close" @click="hideEditCourseModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="editCourseName">笔记名称</label>
            <input 
              type="text" 
              id="editCourseName" 
              v-model="editingCourse.name"
              placeholder="输入笔记名称..."
            >
          </div>
          <div class="form-group">
            <label for="editCourseDescription">笔记描述</label>
            <textarea 
              id="editCourseDescription" 
              v-model="editingCourse.description"
              placeholder="输入笔记描述..." 
              rows="4"
            ></textarea>
          </div>
          <div class="form-group">
            <label for="editCourseIsPublic">是否公开</label>
            <select 
              id="editCourseIsPublic" 
              v-model="editingCourse.isPublic"
              class="form-select"
            >
              <option :value="true">公开（所有人可见）</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-ghost" @click="hideEditCourseModal">取消</button>
          <button class="btn btn-primary" @click="updateCourse">保存修改</button>
        </div>
      </div>
    </div>

    <!-- Add Chapter Modal -->
    <div class="modal" v-if="showChapterModal" @click="handleModalOverlayClick">
      <div class="modal-content">
        <div class="modal-header">
          <h3>新增章节</h3>
          <button class="modal-close" @click="hideChapterModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="chapterTitle">章节标题</label>
            <input 
              type="text" 
              id="chapterTitle" 
              v-model="newChapter.title"
              placeholder="输入章节标题..."
            >
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-ghost" @click="hideChapterModal">取消</button>
          <button class="btn btn-primary" @click="createChapter">创建章节</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import apiService from '@/services/api.js'

export default {
  name: 'CoursePage',
  components: {
    AppHeader
  },
  data() {
    return {
      courses: [],
      currentUser: null,
      currentCourse: null,
      currentChapter: null,
      showCourseModal: false,
      showEditCourseModal: false,
      showChapterModal: false,
      newCourse: {
        name: '',
        description: '',
        isPublic: false // 添加是否公开字段，默认为私有
      },
      editingCourse: {
        id: null,
        name: '',
        description: '',
        isPublic: false // 添加是否公开字段
      },
      newChapter: {
        title: ''
      }
    }
  },
  mounted() {
    this.checkAuthStatus()
    this.loadData()
    this.handleRouteQuery()
  },
  methods: {
    async loadData() {
      if (!this.currentUser) {
        this.courses = []
        return
      }
      
      try {
        const response = await apiService.getCourses()
        this.courses = response.courses || []
      } catch (error) {
        console.error('加载笔记课程失败:', error)
        this.courses = []
      }
    },
    checkAuthStatus() {
      const savedUser = localStorage.getItem('currentUser')
      const savedToken = localStorage.getItem('auth_token')
      
      if (savedUser && savedToken) {
        this.currentUser = JSON.parse(savedUser)
      }
    },
    handleRouteQuery() {
      const courseId = this.$route.query.courseId
      if (courseId) {
        const course = this.courses.find(c => c.id === parseInt(courseId))
        if (course) {
          this.selectCourse(course)
        }
      }
    },
    selectCourse(course) {
      this.currentCourse = course
      this.currentChapter = null
    },
    editChapter(chapter) {
      this.currentChapter = chapter
      this.$nextTick(() => {
        if (this.$refs.noteEditor) {
          this.$refs.noteEditor.innerHTML = chapter.content || '<p>开始编写您的笔记...</p>'
        }
      })
    },
    backToChapters() {
      this.currentChapter = null
    },
    toggleSidebar() {
      // Toggle sidebar visibility
    },
    showAddCourseModal() {
      this.showCourseModal = true
      this.newCourse = { name: '', description: '', isPublic: true }
    },
    hideCourseModal() {
      this.showCourseModal = false
    },
    showAddChapterModal() {
      this.showChapterModal = true
      this.newChapter = { title: '' }
    },
    hideChapterModal() {
      this.showChapterModal = false
    },
    async createCourse() {
      if (!this.newCourse.name.trim()) {
        await this.$alert('请输入笔记名称', {
          title: '输入错误',
          variant: 'warning'
        })
        return
      }
      
      try {
        const courseData = {
          name: this.newCourse.name,
          description: this.newCourse.description,
          isPublic: this.newCourse.isPublic // 添加是否公开字段
        }
        
        const response = await apiService.createCourse(courseData)
        const createdCourse = response.data
        
        this.courses.push(createdCourse)
        this.hideCourseModal()
        
        await this.$toast('笔记创建成功！', {
          title: '创建成功',
          variant: 'success'
        })
      } catch (error) {
        console.error('创建笔记失败:', error)
        await this.$toast('创建笔记失败: ' + (error.message || '未知错误'), {
          title: '创建失败',
          variant: 'error'
        })
      }
    },
    async createChapter() {
      if (!this.newChapter.title.trim()) {
        await this.$alert('请输入章节标题', {
          title: '输入错误',
          variant: 'warning'
        })
        return
      }
      
      if (!this.currentCourse) {
        await this.$alert('请选择一个笔记', {
          title: '操作错误',
          variant: 'warning'
        })
        return
      }
      
      try {
        const chapterData = {
          title: this.newChapter.title,
          content: '<p>开始编写您的笔记...</p>'
        }
        
        const response = await apiService.addCourseChapter(this.currentCourse.id, chapterData)
        const createdChapter = response.data
        
        // 更新当前课程的章节列表
        if (!this.currentCourse.chapters) {
          this.currentCourse.chapters = []
        }
        this.currentCourse.chapters.push(createdChapter)
        
        this.hideChapterModal()
        this.editChapter(createdChapter)
        
        // 显示成功提示
        this.$toast('章节创建成功', {
          title: '创建成功',
          variant: 'success'
        })
      } catch (error) {
        console.error('创建章节失败:', error)
        this.$toast(error.message || '创建章节失败', {
          title: '创建失败',
          variant: 'error'
        })
      }
    },
    async deleteChapter(chapter) {
      const confirmed = await this.$confirm(
        `确定要删除章节"${chapter.title}"吗？`,
        {
          title: '删除章节',
          variant: 'error',
          confirmText: '删除'
        }
      )
      
      if (confirmed) {
        try {
          await apiService.deleteCourseChapter(this.currentCourse.id, chapter.id)
          
          const index = this.currentCourse.chapters.findIndex(c => c.id === chapter.id)
          if (index > -1) {
            this.currentCourse.chapters.splice(index, 1)
          }
          
          // 显示删除成功的Toast提示
          this.$toast(`章节"${chapter.title}"已删除`, {
            title: '删除成功',
            variant: 'success'
          })
        } catch (error) {
          console.error('删除章节失败:', error)
          this.$toast(error.message || '删除章节失败', {
            title: '删除失败',
            variant: 'error'
          })
        }
      }
    },
    async saveChapter() {
      if (this.currentChapter && this.$refs.noteEditor) {
        this.currentChapter.content = this.$refs.noteEditor.innerHTML
        
        try {
          const response = await apiService.updateCourseChapter(
            this.currentCourse.id, 
            this.currentChapter.id, 
            {
              content: this.currentChapter.content
            }
          )
          
          // 更新本地数据
          const updatedChapter = response.data
          const index = this.currentCourse.chapters.findIndex(c => c.id === this.currentChapter.id)
          if (index > -1) {
            this.currentCourse.chapters[index] = updatedChapter
          }
          
          // 显示保存成功的Toast提示
          this.$toast('章节保存成功', {
            title: '保存成功',
            variant: 'success'
          })
        } catch (error) {
          console.error('保存章节失败:', error)
          this.$toast(error.message || '保存章节失败', {
            title: '保存失败',
            variant: 'error'
          })
        }
      }
    },
    editCourse(course) {
      this.showEditCourseModal = true
      this.editingCourse = {
        id: course.id,
        name: course.name,
        description: course.description,
        isPublic: course.isPublic !== undefined ? course.isPublic : false // 初始化是否公开字段
      }
    },
    hideEditCourseModal() {
      this.showEditCourseModal = false
      this.editingCourse = {
        id: null,
        name: '',
        description: ''
      }
    },
    async updateCourse() {
      if (!this.editingCourse.name.trim()) {
        await this.$alert('请输入笔记名称', {
          title: '输入错误',
          variant: 'warning'
        })
        return
      }
      
      try {
        const courseData = {
          name: this.editingCourse.name,
          description: this.editingCourse.description,
          isPublic: this.editingCourse.isPublic // 添加是否公开字段
        }
        
        const response = await apiService.updateCourse(this.editingCourse.id, courseData)
        const updatedCourse = response.data
        
        const index = this.courses.findIndex(c => c.id === this.editingCourse.id)
        if (index !== -1) {
          this.$set(this.courses, index, updatedCourse)
        }
        
        if (this.currentCourse && this.currentCourse.id === this.editingCourse.id) {
          this.currentCourse = updatedCourse
        }
        
        this.hideEditCourseModal()
        
        await this.$toast('笔记更新成功！', {
          title: '更新成功',
          variant: 'success'
        })
      } catch (error) {
        console.error('更新笔记失败:', error)
        await this.$toast('更新笔记失败: ' + (error.message || '未知错误'), {
          title: '更新失败',
          variant: 'error'
        })
      }
    },
    async deleteCourse(course) {
      const confirmed = await this.$confirm(
        `确定要删除笔记“${course.name}”吗？此操作不可恢复。`,
        {
          title: '删除笔记',
          variant: 'error',
          confirmText: '删除'
        }
      )
      
      if (confirmed) {
        try {
          await apiService.deleteCourse(course.id)
          
          const index = this.courses.findIndex(c => c.id === course.id)
          if (index > -1) {
            this.courses.splice(index, 1)
          }
          
          // 如果删除的是当前正在编辑的笔记，则清空当前状态
          if (this.currentCourse && this.currentCourse.id === course.id) {
            this.currentCourse = null
            this.currentChapter = null
          }
          
          // 显示删除成功的Toast提示
          this.$toast(`笔记“${course.name}”已删除`, {
            title: '删除成功',
            variant: 'success'
          })
        } catch (error) {
          console.error('删除笔记失败:', error)
          this.$toast(error.message || '删除笔记失败', {
            title: '删除失败',
            variant: 'error'
          })
        }
      }
    },
    onEditorInput() {
      // Auto-save functionality could be added here
    },
    formatText(command) {
      document.execCommand(command, false, null)
    },
    insertImage() {
      this.$refs.imageInput.click()
    },
    handleImageUpload(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const img = `<img src="${e.target.result}" style="max-width: 100%; height: auto;">`
          document.execCommand('insertHTML', false, img)
        }
        reader.readAsDataURL(file)
      }
    },
    getContentPreview(content) {
      if (!content) return '暂无内容'
      const textContent = content.replace(/<[^>]*>/g, '').trim()
      return textContent.length > 50 ? textContent.substring(0, 50) + '...' : textContent || '暂无内容'
    },
    handleModalOverlayClick(e) {
      if (e.target.classList.contains('modal')) {
        this.hideCourseModal()
        this.hideEditCourseModal()
        this.hideChapterModal()
      }
    },
    showLoginModal() {
      // Handle login modal
    },
    showRegisterModal() {
      // Handle register modal
    },
    handleLogout() {
      this.currentUser = null
      localStorage.removeItem('currentUser')
      this.$router.push('/')
    }
  }
}
</script>

<style>
/* Import Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Course Page Styles */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Sidebar Styles */
.sidebar {
  width: 300px;
  background: white;
  border-right: 1px solid #e2e8f0;
  padding: 1rem;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.sidebar-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.sidebar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-ghost {
  background: transparent;
  color: #64748b;
  border-color: #e2e8f0;
}

.btn-ghost:hover {
  background: #f8fafc;
  color: #1e293b;
}

.btn-primary {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 11px;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.course-item {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-item:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.course-item.active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.course-info {
  flex: 1;
  min-width: 0;
}

.course-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-left: 0.5rem;
}

.course-item:hover .course-actions {
  opacity: 1;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: #f1f5f9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  font-size: 9px;
}

.action-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.course-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.course-chapters {
  font-size: 11px;
  color: #64748b;
}

/* 创建新笔记卡片样式 */
.add-course {
  border: 2px dashed #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.add-course:hover {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
}

.add-course-content {
  text-align: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.add-course-content i {
  font-size: 18px;
  color: #3b82f6;
}

.add-course-content span {
  font-size: 12px;
  font-weight: 500;
}

/* Content Area */
.content {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.content-header {
  margin-bottom: 1rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: #64748b;
}

.breadcrumb-item {
  color: inherit;
  text-decoration: none;
}

.breadcrumb-item:hover {
  color: #3b82f6;
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  color: #cbd5e1;
}

/* Welcome Screen */
.welcome-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
}

.welcome-content i {
  font-size: 64px;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.welcome-content h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.welcome-content p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 2rem;
}

.welcome-content .btn {
  margin: 0 auto;
  display: inline-flex;
}

/* Chapter View */
.chapter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.chapter-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.chapter-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.chapter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

.chapter-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.chapter-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.chapter-meta span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.chapter-actions {
  position: absolute;
  top: 1rem;
  left: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chapter-card:hover .chapter-actions {
  opacity: 1;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: #f1f5f9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  font-size: 10px;
}

.action-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.add-chapter {
  border: 2px dashed #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-chapter:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.add-chapter-content {
  text-align: center;
  color: #64748b;
}

.add-chapter-content i {
  font-size: 24px;
  margin-bottom: 0.5rem;
  display: block;
}

/* Editor Styles */
.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.title-input {
  font-size: 20px;
  font-weight: 600;
  border: none;
  outline: none;
  background: transparent;
  color: #1e293b;
  width: 100%;
}

.editor-actions {
  display: flex;
  gap: 0.5rem;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}

.toolbar-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  margin: 0 0.25rem;
}

.editor-container {
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.editor {
  min-height: 400px;
  padding: 1.5rem;
  outline: none;
  background: white;
  font-size: 14px;
  line-height: 1.6;
  color: #1e293b;
}

.editor:focus {
  outline: none;
}

.editor p {
  margin-bottom: 1rem;
}

.editor h1, .editor h2, .editor h3 {
  margin-bottom: 1rem;
  font-weight: 600;
}

.editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}

.modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: white;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .chapter-grid {
    grid-template-columns: 1fr;
  }
  
  .editor-toolbar {
    flex-wrap: wrap;
  }
}
</style>